<template>
    <div>
        <a-spin :spinning="spinning">
            <a-form :layout="formLayout" :form="form">
                <a-form-item label='单位名称'  v-bind="formItemLayout">
                    <a-input placeholder='请输入单位名称' v-decorator="['name',{rules: [{ required: true, message: '单位名称不能为空!' }]}]" style="width: 300px;"/>
                </a-form-item>
                <a-form-item label='模式'  v-bind="formItemLayout">
                    <a-radio-group v-decorator="['mode',{rules: [{ required: true, message: '请选择模式!' }]}]">
                        <a-radio value="WEIGHT">计重</a-radio>
                        <a-radio value="NUMBER">计数</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item :wrapperCol="{span:14,offset: 4}">
                    <a-input type="hidden" v-decorator="['id']" />
                    <a-button type='primary' :loading="bntLoading" @click="onSubmit">保 存</a-button>
                </a-form-item>
            </a-form>
        </a-spin>
    </div>
</template>
<script>
    import {findDetail,save} from "@/api/goodsUnit";
    export default {
        beforeCreate(){
            this.form = this.$form.createForm(this);
        },
        props:{
            id:{
                type:Number,
                default:null
            },
            companyId:{
                type:Number,
                default:null
            }
        },
        data() {
            return{
                formLayout:'horizontal',
                spinning:false,
                loading:false,
                bntLoading:false,
            }
        },
        computed: {
            formItemLayout () {
                const { formLayout } = this
                return formLayout === 'horizontal' ? {
                    labelCol: { span:4},
                    wrapperCol: { span:10 },
                } : {}
            },
        },
        methods:{
            onSubmit(){
                this.bntLoading = true;
                this.form.validateFields(
                    (err,values) => {
                        if (!err) {
                            this.onSave(values);
                        }else{
                            this.bntLoading = false;
                        }
                    },
                )
            },
            async onSave(data){
                this.spinning = true;
                let resp;
                data.companyId = this.companyId;
                resp = await save(data);
                this.spinning = false;
                if(this.qUtil.validResp(resp)){
                    this.$emit("onCancel",false);
                }else{
                    this.bntLoading = false;
                }
            },
            async onLoad(){
                if(this.id == 0) return false;
                let resp = await findDetail(this.id);
                if(this.qUtil.validResp(resp)){
                    const {id,name,mode} = resp.data.terminalGoodsUnit;
                    this.form.setFieldsValue({id,name,mode});
                }
            }
        },
        mounted(){
            this.form.setFieldsValue({'mode':'NUMBER'});
            this.onLoad();
        },
    }
</script>